<template>
	<view class="page_wrap">
		<custom-header title="平台代卖" sticky />
		<!-- 搜索区域 -->
		<view class="search-section">
			<view class="time-selector" @click="showTimePicker">
				<text class="time-text">{{ selectedDate }}</text>
				<text class="time-arrow">▼</text>
			</view>
			<view class="search-box">
				<image class="search-icon" src="/static/home/cxtb.png" mode="aspectFit" />
				<input type="text" v-model="searchKeyword" placeholder="供应商名称/商品名称" placeholder-class="placeholder" />
			</view>
		</view>

		<!-- Tab切换 -->
		<view class="tab-bar">
			<view 
				class="tab-item" 
				:class="{ active: activeTabIndex == index }" 
				@click="switchTab(index)"
				v-for="(item,index) in tabList"
				:key="index">
					<image v-if="activeTabIndex == index" class="tab-icon" src="/static/home/xzlk.png" mode="aspectFit" />
					<text class="tab-text">{{ item }}</text>
			</view>
		</view>

		<!-- 列表数据 -->
		<view class="_wrap">
			<view
				class="no_data" 
				v-if="!listData.length && listLoading != 'loading'">
					<view class="text">暂无数据</view>
			</view>
			<!-- 表格区域 -->
			<block v-else-if="listData.length">
				<view class="table-section" v-for="(item, index) in listData" :key="index">
					<!-- 表头 -->
					<view class="table-header">
						<text class="header-cell flower">{{item.supplierName}}(ID:{{item.id}})</text>
						<text class="header-cell stock">库存(总数)</text>
						<text class="header-cell residue">剩余(总数)</text>
						<text class="header-cell operation">操作</text>
					</view>
					<!-- 数据行 -->
					<view class="table-body">
						<view class="table-row" v-for="(f_item, f_index) in item.flowerList" :key="f_index">
							<view class="table-cell flower">
								<view class="flower-name">
									{{ f_item.flowerName }}
								</view>
								<view class="grade">
									A级
								</view>
							</view>
							<view class="table-cell stock">
								<text :class="{red:!f_item.stock}">{{ f_item.stock }}扎</text>
							</view>
							<view class="table-cell residue">
								<text :class="{red:!f_item.residue}">{{ f_item.residue }}扎</text>
							</view>
							<view class="table-cell operation" @click="handleDetal(item,f_item)">
								查看
							</view>
						</view>
					</view>
				</view>
			</block>
			<view class="loading_wrap" v-if="listLoading == 'loading'">
				<up-loadmore 
					:status="listLoading" 
					iconSize="22"
					iconColor="#F5564D"  
					loadingIcon='semicircle'
					loadingText="" />
			</view>
		</view>
		<view class="footer_btn_wrap fixed">
			<view class="btn_wrap">
				<button
					size="default" 
					type="default" 
					class="btn"
					@click="handleScan">扫码上架</button>
			</view>
		</view>

		<!-- 时间选择器组件 -->
		<custom-select-time :show="showTimeSelector" :defaultDate="selectedDate" @confirm="handleTimeConfirm"
			@close="showTimeSelector = false" />
		<!-- 弹出层提示 -->
		<custom-toast :show="isShowToast" :config="toastConfig" @cancel="hideToast" @confirm="confirmToast" />
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
		onMounted
	} from 'vue'
	import {
		getCurrentDate,
		objectToQueryString
	} from '@/utils/util.js'
	// 弹出层操作
	import useToast from '../../utils/toast.js'
	const {
		isShowToast,
		toastConfig,
		showToast,
		hideToast
	} = useToast()
	// 弹出层确认
	const confirmToast = (data) => {
		console.log(data)
		hideToast()
	}
	
	const searchKeyword = ref('')
	
	// 选择时间
	const showTimeSelector = ref(false)
	const selectedDate = ref('')
	const showTimePicker = () => {
		showTimeSelector.value = true
	}	
	const handleTimeConfirm = (date) => {
		selectedDate.value = date
		loadGetListData()
	}

	// 当前激活的Tab
	const activeTabIndex = ref(0)
	// Tab列表
	const tabList = ['全部', '待上架', '交易中', '已完成']
	// 切换Tab
	const switchTab = (index) => {
		activeTabIndex.value = index
		loadGetListData()
	}

	// 列表数据
	const listData = ref([])
	const listLoading = ref('loadmore')
	const loadGetListData = () => {
		listData.value = []
		listLoading.value = 'loading'
		setTimeout(() => {
			listLoading.value = 'loadmore'
			listData.value = [
				{
					id:'66666',
					supplierName:'一把火花卉',
					flowerList:[
						{
							flowerName: '蜜桃雪山(香槟)',
							stock: 50,
							residue:20
						},
						{
							flowerName: '蜜桃雪山(香槟)',
							stock: 50,
							residue:20
						}
					]
				},
				{
					id:'7777',
					supplierName:'啦啦花卉',
					flowerList:[
						{
							flowerName: '蜜桃雪山(香槟)',
							stock: 50,
							residue:20
						},
						{
							flowerName: '蜜桃雪山(香槟)',
							stock: 0,
							residue:20
						}
					]
				},
				{
					id:'99999',
					supplierName:'芜湖花卉',
					flowerList:[
						{
							flowerName: '蜜桃雪山(香槟)',
							stock: 50,
							residue:0
						},
						{
							flowerName: '蜜桃雪山(香槟)',
							stock: 50,
							residue:20
						}
					]
				}
			]
		}, 1000)
	}

	// 扫码
	const handleScan = ()=>{
		uni.scanCode({
			onlyFromCamera: true, // 只允许从相机扫码
			scanType: ['qrCode', 'barCode'], // 扫码类型
			success: (res) => {
				console.log('扫码成功：', res)
			},
			fail: (error) => {
				console.error('扫码失败：', error)
			}
		})
	}
	// 查看详情
	const handleDetal = ()=>{
		uni.navigateTo({
			url:`/pages/platformConsignmentSalesDetail/platformConsignmentSalesDetail?activeTabIndex=${activeTabIndex.value}`
		})
	}
	onMounted(() => {
		selectedDate.value = getCurrentDate()
		loadGetListData()
	})
</script>

<style lang="scss">
	.page_wrap {
		min-height: 100vh;
		background-color: #fff;

		.search-section {
			background: #FFFFFF;
			padding: 20rpx 30rpx;
			display: flex;
			gap: 20rpx;

			.time-selector {
				display: flex;
				align-items: center;
				gap: 8rpx;
				flex-shrink: 0;
				margin-left: 20rpx;
				cursor: pointer;

				.time-text {
					font-size: 24rpx;
					color: #555;
				}

				.time-arrow {
					font-size: 20rpx;
					color: #555;
				}
			}

			.search-box {
				flex: 1;
				height: 64rpx;
				background: #F7F7F7;
				border-radius: 32rpx;
				display: flex;
				align-items: center;
				padding: 0 20rpx;

				.search-icon {
					width: 24rpx;
					height: 24rpx;
					margin-right: 12rpx;
					display: block;
					transform: translateY(-1rpx);
				}

				input {
					flex: 1;
					font-size: 24rpx;
					color: #333333;
				}

				.placeholder {
					color: #999999;
				}
			}
		}

		// Tab栏
		.tab-bar {
			background: #ffffff;
			display: flex;
			.tab-item {
				flex: 1;
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
		
				.tab-icon {
					width: 27.5rpx;
					height: 25rpx;
					transform: translateX(10rpx) translateY(-16rpx);
				}
		
				.tab-text {
					font-size: 28rpx;
					color: #999;
				}
		
				.tab-indicator {
					position: absolute;
					bottom: 0;
					width: 60rpx;
					height: 4rpx;
					background: #f5564d;
					border-radius: 2rpx;
				}
		
				&.active .tab-text {
					color: #333;
					font-weight: 600;
				}
			}
		}
		._wrap{
			padding: 0 24rpx 140rpx;
		}
		// 表格区域
		.table-section {
			margin-top: 24rpx;
			.table-header {
				padding: 0 24rpx;
				display: flex;
				background: #FFF4E6;
				height: 67rpx;
				align-items: center;
				border-radius: 12rpx;
		
				.header-cell {
					font-size: 24rpx;
					color: #EC6F15;
		
					&.flower {
						flex: 2.5;
					}
		
					&.stock {
						flex: 1.2;
						text-align: center;
					}
		
					&.residue {
						flex: 1.2;
						text-align: center;
					}
		
					&.operation {
						flex: 0.8;
						text-align: center;
					}
				}
			}
		
			.table-body {
				border: 1px solid #F2F2F2;
				border-radius: 12rpx;
				padding: 0 24rpx;
				margin-top: 12rpx;
				.table-row {
					display: flex;
					align-items: center;
					padding: 28rpx 0;
					border-bottom: 1rpx solid #F2F2F2;
					position: relative;
					&:last-child {
						border-bottom: none;
					}
					.table-cell {
						font-size: 24rpx;
						color: #666666;
						&.flower {
							flex: 2.5;
							justify-content: flex-start;
							gap: 8rpx;
							white-space: nowrap;
							overflow: hidden;
							display: flex;
									
							.flower-name {
								color: #666666;
								//  flex: 1;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								min-width: 0;
							}
									
							.grade{
								color: #F5564D;
								font-size: 24rpx;
								flex-shrink: 0;
								min-width: 50rpx;
							}
						}
		
						&.stock {
							flex: 1.2;
							text-align: center;
							.red{
								color: #FF3316 !important;
							}
						}
		
						&.residue {
							flex: 1.2;
							text-align: center;
							.red{
								color: #FF3316 !important;
							}
						}
		
						&.operation {
							flex: 0.8;
							text-align: center;
							color: #4298FF;
						}
					}
				}
			}
			.no_data{
				padding-top: 100rpx;
				text-align: center;
				font-size: 28rpx;
				color: #999;
			}
		}
	}
	.operation_popup{
		padding: 40rpx;
		.title{
			font-size: 32rpx;
			color: #666;
			text-align: center;
		}
		.btn_wrap{
			width:520rpx;
			height: 148rpx;
			display: flex;
			align-items: center;
			background-color: #f5f5f5;
			margin-top: 36rpx;
			border-radius: 16rpx;
			.icon{
				width: 148rpx;
				height:124rpx;
				display: flex;
				transform: translateY(20rpx);
			}
			.text{
				font-size: 32rpx;
				color: #333333;
				font-weight: bold;
				padding-left: 24rpx;
			}
		}
	}
</style>